{% extends "apostrophe-modal:base.html" %}
{% import 'apostrophe-ui:components/buttons.html' as buttons with context %}

{%- block modalClass -%}
  apos-versions-modal
{%- endblock -%}

{% block controls %}
  <div class="apos-modal-controls">
    {{ buttons.minor(__ns('apostrophe', 'Finished'), { action: 'cancel' }) }}
  </div>
{% endblock %}

{% block label %}
{{ __ns('apostrophe', 'Versions') }}
{% endblock %}

{% block body %}
<div class="apos-versions" data-no-changes="{{ __ns('apostrophe', 'No changes to display.') }}">
  {# Loop over all versions and render changes in each one #}
  {% for version in data.versions %}
    <div class="apos-version{% if loop.first %} apos-version-current{% endif %}" data-version="{{ version._id }}" data-previous="{{ version._previous._id }}">
      <div class="apos-author">
        <div class="apos-avatar-wrapper">
        </div>
      </div>{#
      #}<div class="apos-changes-meta">
          <cite>{{ version.author }}</cite><span>{{ __ns('apostrophe', 'made changes on') }}</span>
          <h4>{{ version.createdAt | date(__ns('apostrophe', 'MM/DD/YY[ at ]h:mma')) }}</h4><br>
          {%- if version._previous -%}
            <h5 data-open-changes>{{ __ns('apostrophe', 'See Changes') }}</h5>
          {%- endif -%}
      </div>
        {%- if loop.first -%}
          {{ buttons.disabled(__ns('apostrophe', 'Current'), { action: 'none', value: version._id }) }}
        {%- else -%}
          {{ buttons.major(__ns('apostrophe', 'Revert to'), { action: 'revert', value: version._id })}}
        {%- endif -%}
        <div class="apos-changes">
        {% if version._previous -%}
          {# JS populates me #}
          <div data-changes></div>
        {%- endif %}
      </div>
    </div>
  {% endfor %}
</div>
{% endblock %}

{% block footerContainer %}{% endblock %}
